<template>
    <div v-if="detailsVisible">
        <BreadcrumbA></BreadcrumbA>
        <div style="width:100%; height: 100px; background: #b40909;">
            <div style="float: left; line-height: 100px;   font-size: 50px;   font-weight: bold;  color: yellow;  font-family: cursive;  width: 730px;"><img
                    src="../../../images/danghui.png" style="width:70px;height:70px;margin-top: -10px;  margin-left: 10px; margin-right: 10px;">电子党务系统</div>
            <div style="float: right; "><img src="../../../images/flat-avatar.png" style="float: right;width:70px;height:70px;margin-top: 10px; margin-right: 30px;"></div>
        </div>
        <div class="leftitem">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="收文管理"><img src="../../../images/hongqi.png" style="width:45px;height:45px; margin-right: 10px;">收文管理</el-menu-item>
                <el-menu-item index="发文管理"><img src="../../../images/hongqi.png" style="width:45px;height:45px; margin-right: 10px;">发文管理</el-menu-item>
                  </el-menu>
        </div>
        <div class="rightitem">





















        </div>

    </div>
</template>
<script>
    import Common from "../../../js/Common.js";
    import {
        mapActions
    } from 'vuex';
    export default {
        data: () => ({
            detailsVisible: true,
            activeIndex: '人员管理',
            showAdd: false,

            showztjyhd: false,

            menuIndexRightitem: [{
                value: 'showztjyhd',
                name: '主题教育活动'
            }, ]
        }),
        components: {
            ztjyhd: function (resolve) {
                require(["./ztjyhd.vue"], resolve);
            },



        },
        mounted() {
            Common.Config.this = this;
            if (this.GetUser() == false) {
                this.$router.push("/");
            }
            this.GetActiveDwId_DzbId();
            if (this.$store.state.Dw_DzbID.dwid == -1) {
                if (this.$store.state.user.operation == 0) {
                    this.showAdd = true;
                }
            } else if (this.$store.state.Dw_DzbID.dzbid == -1) {
                if (this.$store.state.user.operation <= 1) {
                    this.showAdd = true;
                }
            } else if (this.$store.state.Dw_DzbID.dzbid > -1 && this.$store.state.Dw_DzbID.dzbid > -1) {
                if (this.$store.state.user.operation <= 2) {
                    this.showAdd = true;
                }
            }
            if (this.$route.params) {
                if (this.$route.params.name) {
                    this.activeIndex = this.$route.params.name;
                    this.handleSelect(this.activeIndex);
                }
            }

        },
        watch: {
            showztjyhd: function (n) {
                if (n == true) {
                    let _this = this;
                    setTimeout(function () {
                        _this.$refs.ztjyhd.$data.addperson_show = _this.showAdd;
                        _this.$refs.ztjyhd.$data.detailsVisible = true;
                    }, 100)
                }
            },








        },
        methods: {
            ...mapActions(['GetUser', 'GetActiveDwId_DzbId']),
            handleSelect(key) {
                this.FromIndexAndShowRight(key);
            },
            FromIndexAndShowRight(key) {
                let ThatOk = this.menuIndexRightitem.filter(function (value) {
                    return value.name == key;
                });
                let ThatNotOk = this.menuIndexRightitem.filter(function (value) {
                    return value.name != key;
                });
                for (let index = 0; index < ThatOk.length; index++) {
                    let element = ThatOk[index];
                    this[element.value] = true;
                }
                for (let index2 = 0; index2 < ThatNotOk.length; index2++) {
                    let element2 = ThatNotOk[index2];
                    this[element2.value] = false;
                }
            },
        }
    }
</script>
<style scope>
    .leftitem {
        float: left;
        margin-bottom: 0;
        margin-right: 10px;
        height: 100%;
        padding: 0;
        position: relative;
        margin: 0 0 15px;

    }

    .rightitem {
        overflow: hidden;
        position: relative;
        margin: 0;
        padding: 0;
        padding-left: 5px;
    }

    .el-menu-demo {
        height: 900px;
        background: #e0e0e0;
        color: white;
        width: 230px;
        font-size: 14px;
    }

    .el-breadcrumb__inner {

        color: #fff;
    }

    .link {
        color: #fff;
    }

    .el-menu-item {
        font-size: 18px;
    }
</style>